<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=640,target-densitydpi=320,user-scalable=no">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .ul li {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            margin-left: 10px;
            font-size: 2em;
            line-height: 100px;
            text-align: center;
            color: #fff;
        }

        .ul {
            list-style: none;
            overflow: hidden;
        }

        /*选择器下面的同级元素，不包括自身    */
        /*.ul .a~li {*/
        /*background-color: yellow;*/
        /*}*/

        /*^选择 开头为a的类名*/
        /*.ul li[class^='a'] {*/
        /*background: blue;*/
        /*}*/
        /*$为结尾*/
        /*.ul li[class$='a'] {*/
        /*background: blue;*/
        /*}*/
        /*  *为所有 */
        /*.ul li[class*='a'] {*/
            /*background: blue;*/
        /*}*/

        /* ::为伪元素 */
        /*.oo::selection {*/
        /*background: gold;*/
        /*color: skyblue;*/
        /*}*/

        /*结构性伪类*/
        /*与元素类型无关*/
        /*.ul li:nth-child(2) {*/
        /*background: sienna;*/
        /*}*/

        /*与元素类型有关*/
        /*.ul li:nth-last-of-type(5) {*/
        /*background: sienna;*/
        /*}*/

        /*奇数*/
        /*.ul li:nth-child(odd) {*/
        /*background: sienna;*/
        /*}*/
        /*偶数*/
        /*.ul li:nth-child(even) {*/
        /*background: sienna;*/
        /*}*/

        /*倒数*/
        /*.ul li:nth-last-child(1) {*/
        /*background: sienna;*/
        /*}*/

        /*公式*/
        /*.ul li:nth-child(2n+1) {*/
        /*background: sienna;*/
        /*}*/

        /*:only-child 唯一的子元素*/
        /*:only-of-type 同上 指定类型*/
        input:enabled {
            background: yellow;
        }

        input:disabled {
            background: blue;
        }
        .a:not(span) {
            width: 100px;
            height: 100px;
            background: darkcyan;
        }
        div:empty {
            width: 100px;
            height: 100px;
            background: skyblue;
        }
    </style>
</head>
<body>
<div>
    <p></p>
</div>
<div></div>
<div>1</div>
<span class="a"></span><span class="a"></span><span class="a"></span><span class="a"></span>
<input type="text">
<input type="text" disabled="disabled">

<div class="oo">asjdlasjldjasldjlksa</div>
<ul class="ul">
    <li class="a3333333">1</li>
    <li class="b22222">2</li>
    <li class="a11111a">3</li>
    <li class="a">4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>